<template>
    <el-card class="card">
        <div class="f fac fpj header">
            <div class="title">菜单管理</div>
            <div class="operation">
                <el-button type="primary" @click="openDrawer(1)">新增菜单</el-button>
            </div>
        </div>
        <el-tree :data="dataSource" node-key="id" :props="props" :default-expanded-keys="defaultExpandedKeys">
            <template #default="{ node, data }">
                <div class="custom-tree-node f f1 fac fpj">
                    <div class="left f fac">
                        <el-icon class="icon" v-if="data.icon" :size="16">
                            <component :is="data.icon" />
                        </el-icon>
                        <span>{{ data.name }}</span>
                    </div>
                    <div class="right">
                        <span class="text" @click.stop="openDrawer(2, data)">修改</span>
                        <span class="text del" @click.stop="deleteMenu(data)">删除</span>
                    </div>
                </div>
            </template>
        </el-tree>
        <el-drawer v-model="drawerShow" :title="drawerTitle" direction="rtl" @close="closeDrawer">
            <div class="content">
                <el-form :model="form" :rules="rules" hide-required-asterisk ref="refForm">
                    <el-form-item label="上级菜单" prop="parent_id">
                        <el-select style="width: 2rem;" clearable v-model="form.parent_id">
                            <el-option v-for="item in pMenuList" :key="item.id" :label="item.name"
                                :disabled="item.id == form.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="form.name" maxlength="8" style="width: 2rem;" placeholder="请输入菜单名称" />
                    </el-form-item>
                    <el-form-item label="菜单图标" prop="icon">
                        <el-select v-model="form.icon" placeholder="请选择图标" style="width: 2rem;">
                            <el-option v-for="item in iconList" :key="item" :label="item" :value="item">
                                <div class="f fac fpj">
                                    <el-icon :size="20">
                                        <component :is="item"></component>
                                    </el-icon>
                                    <span>{{ item }}</span>
                                </div>
                            </el-option>
                        </el-select>
                        <el-icon :size="20" v-if="form.icon" style="margin-left: 0.1rem;">
                            <component :is="form.icon"></component>
                        </el-icon>
                    </el-form-item>
                    <el-form-item label="请求路径" prop="path">
                        <el-input style="width: 2rem;" v-model="form.path" placeholder="请输入请求路径"></el-input>
                    </el-form-item>
                    <el-form-item label="启/禁用" prop="status">
                        <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
                    </el-form-item>
                </el-form>
                <div class="footer">
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="closeDrawer">取消</el-button>
                </div>
            </div>
        </el-drawer>
    </el-card>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as  IconList from '@element-plus/icons-vue'
import http from '@/api/home'
import utils from '@/utils/utils'

// 整个菜单
const dataSource = ref([])
// 上级菜单列表
const pMenuList = ref([])
const props = {
    children: 'children',
    label: 'name'
}
// 默认展开的数据
const defaultExpandedKeys = []
let drawerShow = ref(false)
let drawerTitle = ref('')
const form = ref({
    id: '',
    parent_id: '',
    name: '',
    path: '',
    icon: '',
    status: 1,
})
const rules = {
    name: [
        { required: true, message: '请输入菜单名', trigger: 'blur' }
    ],
    path: [
        { required: true, message: '请输入请求路径', trigger: 'blur' }
    ]
}

const iconList = ref(Object.keys(IconList))
const refForm = ref()

onMounted(() => {
    getMenuList()
})

// 获取菜单 
const getMenuList = () => {
    http.menuList().then(res => {
        dataSource.value = res.data
        // 上级菜单暂时只有一级和二级
        let oneMenu = []
        let twoMenu = []
        res.data.forEach(item => {
            // 没有父id就是一级菜单
            if (!item.parent_id) {
                oneMenu.push(item)
            }
        })
        // 二级菜单
        oneMenu.forEach(item => {
            if (item.children && item.children.length > 0) {
                twoMenu.push(...item.children)
            }
        })
        // 上级菜单 = 一级菜单 + 二级菜单啊
        pMenuList.value = [...oneMenu, ...twoMenu]
        // 默认展开的数据 
        dataSource.value.forEach(item => {
            if (item.children && item.children.length > 0) {
                defaultExpandedKeys.push(item.id)
            }
        })
    })
}

// 打开抽屉
const openDrawer = (type, data = null) => {
    drawerShow.value = true
    if (type == 1) {
        drawerTitle.value = "新增"
    } else {
        drawerTitle.value = "修改"
    }
    if (data) {
        form.value = { ...data }
        if (form.value.parent_id) {
            form.value.parent_id = form.value.parent_id - 0
        }
    } else {
        form.value = {
            id: '',
            parent_id: '',
            name: '',
            path: '',
            icon: '',
            status: 0,
        }
    }
}
// 关闭抽屉
const closeDrawer = () => {
    drawerShow.value = false
    refForm.value.resetFields(); 
    form.value = {
        id: '',
        parent_id: '',
        name: '',
        path: '',
        icon: '',
        status: 0,
    }
}
// 提交
const submit = () => {
    refForm.value && refForm.value.validate(valid => {
        if (valid) {
            if (drawerTitle.value == "新增") {
                let params = {
                    ...form.value
                }
                delete params.id
                http.menuAdd(params).then(res => {
                    ElMessage({ message: res.message, type: 'success' })
                    drawerShow.value = false
                    getMenuList()
                })
            } else {
                http.menuUpdate(form.value).then(res => {
                    ElMessage({ message: res.message, type: 'success' })
                    drawerShow.value = false
                    getMenuList()
                })
            }
        }
    })
}
// 删除
const deleteMenu = (row) => {
    ElMessageBox.confirm(
        '是否删除该菜单?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 不可以删（有子菜单）
        if (row.children && row.children.length > 0) {
            ElMessage({ message: "删除失败，该菜单还有子菜单，请先删除子菜单", type: 'error' })
            return
        }
        http.menuDelete({ id: row.id }).then(res => {
            ElMessage({ message: res.message, type: 'success' })
            getMenuList()
        })
    })
}
</script>

<style lang="scss" scoped>
.card {
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    margin-top: 0.14rem;
    height: calc(100vh - 0.68rem - 0.7rem);
    overflow-y: auto;

    .header {
        margin-bottom: 0.3rem;

        .title {
            font-size: 0.2rem;
            font-weight: bold;
            color: #000;
            padding-bottom: 0.1rem;
            border-bottom: 4px solid $ncpColor;
        }
    }

    .custom-tree-node {
        padding-right: 0.2rem;

        .icon {
            margin: 0;
        }

        .right {
            .text {
                font-size: 0.12rem;
                margin: 0 0.1rem;

                &:hover {
                    text-decoration: underline;
                }

                color: $otherColor;
            }

            .del {
                color: $helpColor;
            }
        }
    }

    :deep(.el-drawer__title) {
        font-size: 0.16rem;
    }
}
</style>